<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <!-- 包含头部信息用于适应不同设备 -->
    <meta charset="UTF-8" name="viewport" content="width=device-width, initial-scale=1">
    <title>CPU调度算法</title>
    <script src="/js/sendAJAX.js"></script>
   <!-- <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.js"></script>-->
    <script src="vue/vue.js"></script>
    <script src="vue/axios.min.js"></script>
    <!-- 包含 bootstrap 样式表 -->
<!--    <link rel="stylesheet" href="https://apps.bdimg.com/libs/bootstrap/3.2.0/css/bootstrap.min.css">-->
    <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
    <script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
    <script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>

<body>

<div id ="app">
<!--<button @click="getParams">按钮</button>-->

<!--<script type="text/javascript">
    var _this=this;
    $("#abc").click(function () {
        var jsonString = '${progressList}';
            $.ajax({
            url: '/myGet',
            type: 'get',
            dataType: 'json',
            data: {
                json: jsonString
            },
            success:function(data){
               // var jsonData = JSON.stringify(data.progressList[0].name);// 转成JSON格式

                alert(data.progressList[0].name);
                var name = data.progressList[0].name;
                _this.name = name;
            },
            error:function(){
                alert('服务器超时，请重试！');
            }
        });
    })
</script>-->

<div class="container">
    <h2>CPU调度算法</h2>
    <!--选择框-->
    <div class="btn-group" data-toggle="buttons" id="btng">
        <p>选择你要使用的算法：</p>
        <label class="btn btn-primary">
            <input type="radio" name="options" id="option1" value="FCFS"> 先来先服务算法
        </label>
        <label class="btn btn-primary">
            <input type="radio" name="options" id="option2" value="SJF"> 短作业优先算法
        </label>

    </div>

    <!--进程表单-->
    <form class="form-horizontal" role="form" onsubmit="return false">

        <div class="form-group" >
            <label  class="col-sm-2 control-label">进程1</label>
        </div>
        <div class="form-group">
            <label for="firstname1" class="col-sm-2 control-label">到达时间</label>
            <div class="col-sm-10">
                <input required="required" type="text" class="form-control" id="firstname1" v-model="arriveTime1"
                       placeholder="请输入到达时间">
            </div>
        </div>
        <div class="form-group">
            <label for="lastname1" class="col-sm-2 control-label">运行时间</label>
            <div class="col-sm-10">
                <input type="text" class="form-control" id="lastname1" v-model="runTime1"
                       placeholder="请输入运行时间" required="required">
            </div>
        </div>

        <div class="form-group" >
            <label  class="col-sm-2 control-label">进程2</label>
        </div>
        <div class="form-group">
            <label for="firstname2" class="col-sm-2 control-label">到达时间</label>
            <div class="col-sm-10">
                <input type="text" class="form-control" id="firstname2" v-model="arriveTime2"
                       placeholder="请输入到达时间" required="required">
            </div>
        </div>
        <div class="form-group">
            <label for="lastname2" class="col-sm-2 control-label">运行时间</label>
            <div class="col-sm-10">
                <input type="text" class="form-control" id="lastname2" v-model="runTime2"
                       placeholder="请输入运行时间" required="required">
            </div>
        </div>

        <div class="form-group" >
            <label  class="col-sm-2 control-label">进程3</label>
        </div>
        <div class="form-group">
            <label for="firstname3" class="col-sm-2 control-label">到达时间</label>
            <div class="col-sm-10">
                <input type="text" class="form-control" id="firstname3" v-model="arriveTime3"
                       placeholder="请输入到达时间"  required="required">
            </div>
        </div>
        <div class="form-group">
            <label for="lastname3" class="col-sm-2 control-label">运行时间</label>
            <div class="col-sm-10">
                <input type="text" class="form-control" id="lastname3" v-model="runTime3"
                       placeholder="请输入运行时间"  required="required">
            </div>
        </div>

        <div class="form-group" >
            <label  class="col-sm-2 control-label">进程4</label>
        </div>
        <div class="form-group">
            <label for="firstname4" class="col-sm-2 control-label">到达时间</label>
            <div class="col-sm-10">
                <input type="text" class="form-control" id="firstname4" v-model="arriveTime4"
                       placeholder="请输入到达时间" required="required">
            </div>
        </div>
        <div class="form-group">
            <label for="lastname4" class="col-sm-2 control-label">运行时间</label>
            <div class="col-sm-10">
                <input type="text" class="form-control" id="lastname4" v-model="runTime4"
                       placeholder="请输入运行时间" required="required">
            </div>
        </div>
        <div class="form-group" >
            <label  class="col-sm-2 control-label">进程5</label>
        </div>
        <div class="form-group">
            <label for="firstname5" class="col-sm-2 control-label">到达时间</label>
            <div class="col-sm-10">
                <input type="text" class="form-control" id="firstname5" v-model="arriveTime5"
                       placeholder="请输入到达时间" required="required">
            </div>
        </div>
        <div class="form-group">
            <label for="lastname5" class="col-sm-2 control-label">运行时间</label>
            <div class="col-sm-10">
                <input type="text" class="form-control" id="lastname5" v-model="runTime5"
                       placeholder="请输入运行时间" required="required">
            </div>
        </div>
        <div class="form-group" >
            <label  class="col-sm-2 control-label">进程6</label>
        </div>
        <div class="form-group">
            <label for="firstname6" class="col-sm-2 control-label">到达时间</label>
            <div class="col-sm-10">
                <input type="text" class="form-control" id="firstname6" v-model="arriveTime6"
                       placeholder="请输入到达时间" required="required">
            </div>
        </div>
        <div class="form-group">
            <label for="lastname6" class="col-sm-2 control-label">运行时间</label>
            <div class="col-sm-10">
                <input type="text" class="form-control" id="lastname6" v-model="runTime6"
                       placeholder="请输入运行时间" required="required">
            </div>
        </div>
        <div class="form-group" >
            <label  class="col-sm-2 control-label">进程7</label>
        </div>
        <div class="form-group">
            <label for="firstname7" class="col-sm-2 control-label">到达时间</label>
            <div class="col-sm-10">
                <input type="text" class="form-control" id="firstname7" v-model="arriveTime7"
                       placeholder="请输入到达时间" required="required">
            </div>
        </div>
        <div class="form-group">
            <label for="lastname7" class="col-sm-2 control-label">运行时间</label>
            <div class="col-sm-10">
                <input type="text" class="form-control" id="lastname7" v-model="runTime7"
                       placeholder="请输入运行时间" required="required">
            </div>
        </div>

        <!--<div class="form-group">
            <div class="col-sm-offset-2 col-sm-10">
                <div class="checkbox">
                    <label>
                        <input type="checkbox"> 请记住我
                    </label>
                </div>
            </div>
        </div>-->
        <div class="form-group">
            <div class="col-sm-offset-2 col-sm-10">
                <button type="submit" class="btn btn-default" @click="getProgress">我填好了</button>
            </div>
        </div>
    </form>

    <div class="table-responsive">
        <table class="table table-striped table-bordered">
            <thead>
            <tr>
                <th>进程名称</th>
                <th>到达时间</th>
                <th>运行时间</th>
                <th>完成时间</th>
                <th>周转时间</th>
                <th>带权周转时间</th>
            </tr>
            </thead>
            <tbody>
            <!--<tr th:each="p:${myJson.keySet()}">
                <td th:text="${p.arriveTime}"></td>
                <td th:text="p.runTime"></td>
                <td th:text="p.finishTime"></td>
                <td th:text="p.totalTime"></td>
                <td th:text="p.weightTotalTime"></td>
                <td th:text="p.name"></td>

            </tr>-->
            <tr>
                <td>P1</td>
                <td>{{arriveTime1 }}</td>
                <td>{{runTime1}}</td>
                <td>{{finishTime1}}</td>
                <td>{{totalTime1}}</td>
                <td>{{weightTotalTime1}}</td>
            </tr>
            <tr>
                <td>P2</td>
                <td>{{arriveTime2 }}</td>
                <td>{{runTime2}}</td>
                <td>{{finishTime2}}</td>
                <td>{{totalTime2}}</td>
                <td>{{weightTotalTime2}}</td>
            </tr>
            <tr>
                <td>P3</td>
                <td>{{arriveTime3 }}</td>
                <td>{{runTime3}}</td>
                <td>{{finishTime3}}</td>
                <td>{{totalTime3}}</td>
                <td>{{weightTotalTime3}}</td>
            </tr><tr>
                <td>P4</td>
                <td>{{arriveTime4 }}</td>
                <td>{{runTime4}}</td>
                <td>{{finishTime4}}</td>
                <td>{{totalTime4}}</td>
                <td>{{weightTotalTime4}}</td>
            </tr><tr>
                <td>P5</td>
                <td>{{arriveTime5 }}</td>
                <td>{{runTime5}}</td>
                <td>{{finishTime5}}</td>
                <td>{{totalTime5}}</td>
                <td>{{weightTotalTime5}}</td>
            </tr><tr>
                <td>P6</td>
                <td>{{arriveTime6 }}</td>
                <td>{{runTime6}}</td>
                <td>{{finishTime6}}</td>
                <td>{{totalTime6}}</td>
                <td>{{weightTotalTime6}}</td>
            </tr><tr>
                <td>P7</td>
                <td>{{arriveTime7 }}</td>
                <td>{{runTime7}}</td>
                <td>{{finishTime7}}</td>
                <td>{{totalTime7}}</td>
                <td>{{weightTotalTime7}}</td>
            </tr>
            </tbody>
        </table>
    </div>
    <!-- 提供额外的视觉效果，标识一组按钮中的原始动作 -->
    <!--<button @click="getAlgorithm" type="button" class="btn btn-primary" >我填好咯</button>-->

</div>

</div>
<script>

    var vm = new Vue({

        el : "#app",
        data : {
            "myA" : "" ,
                    "name1" :"P1",
            "name2" :"P2",
            "name3" :"P3",
            "name4" :"P4",
            "name5" :"P5",
            "name6" :"P6",
            "name7" :"P7",
                    "arriveTime1" :"",
                    "runTime1" : "",
                    "arriveTime2" :"",
                    "runTime2" : "",
                    "arriveTime3" :"",
                     "runTime3" : "",
                    "arriveTime4" :"",
                     "runTime4" : "",
                    "arriveTime5" :"",
                      "runTime5" : "",
                    "arriveTime6" :"",
                     "runTime6" : "",
                    "arriveTime7" :"",
                      "runTime7" : "",
                "finishTime1" : "",
                "totalTime1" : "",
                "weightTotalTime1" : "",
            "finishTime2" : "",
            "totalTime2" : "",
            "weightTotalTime2" : "",
            "finishTime3" : "",
            "totalTime3" : "",
            "weightTotalTime3" : "",
            "finishTime4" : "",
            "totalTime4" : "",
            "weightTotalTime4" : "",
            "finishTime5" : "",
            "totalTime5" : "",
            "weightTotalTime5" : "",
            "finishTime6" : "",
            "totalTime6" : "",
            "weightTotalTime6" : "",
            "finishTime7" : "",
            "totalTime7" : "",
            "weightTotalTime7" : "",
        },
        methods : {
            getProgress(){
                /*var abc = $('input:radio:checked').val();
                alert(abc);*/
                _this = this;
                //var a = $('input:radio:checked').val();
               // alert(a);

               // alert(this.arriveTime+this.runTime);
                axios({
                    method : 'get',
                    url : '/myGet',
                    params : {

                        "myA" : $('input:radio:checked').val(),
                        "myName1": this.name1,
                        "myName2": this.name2,
                        "myName3": this.name3,
                        "myName4": this.name4,
                        "myName5": this.name5,
                        "myName6": this.name6,
                        "myName7": this.name7,
                        "myArriveTime1" : this.arriveTime1,
                        "myRunTime1" : this.runTime1,
                        "myArriveTime2" : this.arriveTime2,
                        "myRunTime2" : this.runTime2,
                        "myArriveTime3" : this.arriveTime3,
                        "myRunTime3" : this.runTime3,
                        "myArriveTime4" : this.arriveTime4,
                        "myRunTime4" : this.runTime4,
                        "myArriveTime5" : this.arriveTime5,
                        "myRunTime5" : this.runTime5,
                        "myArriveTime6" : this.arriveTime6,
                        "myRunTime6" : this.runTime6,
                        "myArriveTime7" : this.arriveTime7,
                        "myRunTime7" : this.runTime7,
                        // "finishTime" : this.finishTime,
                        // "totalTime" : this.totalTime,
                        // "weightTotalTime" : this.weightTotalTime
                        //"myA" : _this.a
                    }
                }).then(function (data) {
                    data = data.data;
                    if (data[0].name == null){
                        alert("请选择算法！");
                    }

                   _this.finishTime1 = data[0].finishTime;
                    _this.totalTime1 = data[0].totalTime;
                    _this.weightTotalTime1 = data[0].weightTotalTime;

                    _this.finishTime2 = data[1].finishTime;
                    _this.totalTime2 = data[1].totalTime;
                    _this.weightTotalTime2 = data[1].weightTotalTime;

                    _this.finishTime3 = data[2].finishTime;
                    _this.totalTime3 = data[2].totalTime;
                    _this.weightTotalTime3 = data[2].weightTotalTime;

                    _this.finishTime4 = data[3].finishTime;
                    _this.totalTime4 = data[3].totalTime;
                    _this.weightTotalTime4 = data[3].weightTotalTime;

                    _this.finishTime5 = data[4].finishTime;
                    _this.totalTime5 = data[4].totalTime;
                    _this.weightTotalTime5 = data[4].weightTotalTime;

                    _this.finishTime6 = data[5].finishTime;
                    _this.totalTime6 = data[5].totalTime;
                    _this.weightTotalTime6 = data[5].weightTotalTime;

                    _this.finishTime7 = data[6].finishTime;
                    _this.totalTime7 = data[6].totalTime;
                    _this.weightTotalTime7 = data[6].weightTotalTime;
                })
            },
            /*getAlgorithm(){
                var a = $('input:radio:checked').val();alert(a)
                axios({
                    method : 'post',
                    url : '/myAlgorithm',

                }).then(function (data) {

                })
            },*/
            /*getParams(){

                var arr = [];
                var _this = this;
                axios({
                    method : 'get',
                    url : '/myGet',
                    dataType: 'json'
                }).then(function (data) {
                    data = data.data;
                    //alert(data[0].name);
                    _this.name = data[0].name;
                    _this.arriveTime = data[0].arriveTime;
                    _this.runTime = data[0].runTime;
                    _this.finishTime = data[0].finishTime;
                    _this.totalTime = data[0].totalTime;
                    _this.weightTotalTime = data[0].weightTotalTime;
                    arr.push(data[0].name,data[0].arriveTime)
                })

            }*/
        }
    });
</script>
</body>
</html>